<template>
  <div>
    <!--  {{ dialogVisible }} -->
    <el-dialog :title="formTitle" :visible.sync="dialogVisible">
      <!-- {{ quesType }} -->
      <el-form ref="form" :model="form" size="mini">
        <el-form-item label="题型" :label-width="formLabelWidth">
          <el-radio-group v-model="form.quesType">
            <el-radio
              :label="item.value"
              v-for="item in selectQuesTypeOptions"
              :key="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题目名称" :label-width="formLabelWidth">
          <el-input type="text" v-model="form.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="题号" :label-width="formLabelWidth">
          <el-input-number
            v-model="form.idRange[0]"
            controls-position="right"
            :min="1"
            :max="form.idRange[1]"
          />
          -
          <el-input-number
            v-model="form.idRange[1]"
            controls-position="right"
            :min="form.idRange[0]"
          />
        </el-form-item>
        <el-form-item
          label="选项个数"
          :label-width="formLabelWidth"
          v-if="!isJudgeQues"
        >
          <el-input-number :min="1" :max="12" v-model="form.optionCount" />
        </el-form-item>
        <el-form-item label="" v-if="!isModifyByUUID">
          <el-checkbox v-model="form.isToTop"
            >添加题目自动排版至顶端客观题区域</el-checkbox
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import {
  QUESTION_TYPE_OPTIONS,
  QUESTION_GROUP_TYPE_MAP,
  QUESTION_SIZE_MAP,
  QUESTION_TYPE_MAP
} from "@/assets/js/constant";
import { uuid as createUUID, getSelectHeight } from "@/assets/js/utils";
import CommonMixin from "./common-mixin";
import eventBus from "@/assets/js/event-bus";
export default {
  mixins: [CommonMixin],
  props: {
    quesType: {
      type: String,
      required: true
    },
    uuid: {
      type: String,
      default: ""
    }
  },
  computed: {
    // 是否在编辑一个已经存在的题组
    isModifyByUUID() {
      return this.uuid !== "";
    },
    selectQuesTypeOptions() {
      /*  console.log(QUESTION_TYPE_OPTIONS, "selectQuesTypeOptions"); */
      return QUESTION_TYPE_OPTIONS.filter(item =>
        [
          QUESTION_TYPE_MAP.SINGLE_SELECT,
          QUESTION_TYPE_MAP.MULTI_SELECT,
          QUESTION_TYPE_MAP.JUDGE
        ].includes(item.value)
      );
    },
    quesTitle() {
      if (this.form.quesType) {
        return QUESTION_TYPE_OPTIONS
          .filter
          /* item => item.value === this.form.quesType */
          ()[0].label;
      }
      return "";
    },
    formTitle() {
      return `添加${this.quesTitle}`;
    },
    isJudgeQues() {
      return this.form.quesType === QUESTION_TYPE_MAP.JUDGE;
    },
    hasTopSelectGroup() {
      return (
        this.questionGroupList.length > 0 &&
        this.questionGroupList[0].groupType === QUESTION_GROUP_TYPE_MAP.SELECT
      );
    },
    submitData() {
      const uuid = createUUID();
      const { quesType } = this.form;
      const groupType = QUESTION_GROUP_TYPE_MAP.SELECT;
      const { title, idRange, optionCount } = this.form;
      const [startId, endId] = idRange;
      const { titleHeight } = QUESTION_SIZE_MAP;
      const {
        itemHeight,
        paddingTopHeight,
        splitHeight,
        idWidth,
        caseWidth,
        caseSplitWidth,
        itemSplitWidth
      } = QUESTION_SIZE_MAP.select;
      const rowCount = 5;
      const itemWidth =
        idWidth +
        caseWidth * optionCount +
        caseSplitWidth * (optionCount - 1) +
        itemSplitWidth;
      // 跨页不可分割的单元高度，这里paddingTopHeight正好是splitHeight的一半，所以这样处理可以。
      // 如果不是这样，那就麻烦了
      const noSplitHeight = splitHeight + itemHeight * rowCount;
      const contents = [
        {
          itemWidth,
          quesType,
          startId,
          endId,
          optionCount
        }
      ];
      const height = getSelectHeight(
        contents,
        rowCount,
        noSplitHeight,
        210 - 2 * 12.8
      );
      const totalHeight = height;
      return {
        title,
        uuid,
        groupType,
        startId,
        endId,
        titleHeight,
        partIndex: 0,
        height,
        totalHeight,
        noSplitHeight,

        rowCount,
        itemHeight,
        paddingTopHeight,
        splitHeight,
        contents
      };
    }
  },
  mounted() {
    console.log(this.quesType);
  },
  watch: {
    "form.quesType": {
      handler() {
        this.form.title = this.quesTitle;
        if (this.isJudgeQues) {
          this.form.optionCount = 2;
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapMutations(["updateQuestionGroupItem"]),
    handleSubmit() {
      if (
        (this.form.isToTop && this.hasTopSelectGroup) ||
        this.isModifyByUUID
      ) {
        this.modifySubmit();
      } else {
        this.submit();
      }
    },
    resetFormData() {
      /* const beginId = this.getBeginId();
      return {
        quesType: this.quesType,
        title: this.quesTitle,
        idRange: [beginId, beginId],
        optionCount: this.isJudgeQues ? 2 : 4,
        isToTop: true
      }; */
    },
    modifySubmit() {
      const { quesType } = this.form;
      const { idRange, optionCount } = this.form;
      const [startId, endId] = idRange;
      let curQuestionGroupItem = this.questionGroupList[0];
      if (this.isModifyByUUID) {
        curQuestionGroupItem = this.questionGroupList.find(
          item => item.uuid === this.uuid
        );
      }
      const { uuid, contents, rowCount, noSplitHeight } = curQuestionGroupItem;
      const {
        idWidth,
        caseWidth,
        caseSplitWidth,
        itemSplitWidth
      } = QUESTION_SIZE_MAP.select;
      const itemWidth =
        idWidth +
        caseWidth * optionCount +
        caseSplitWidth * (optionCount - 1) +
        itemSplitWidth;
      // const sameQuesTypeContent =
      //  contents.find(contentItem => contentItem.quesType === quesType);
      contents.push({
        itemWidth,
        quesType,
        startId,
        endId,
        optionCount
      });
      this.updateQuestionGroupItem({
        uuid,
        key: "contents",
        value: contents
      });
      this.updateQuestionGroupItem({
        uuid,
        key: "endId",
        value: endId
      });
      const height = getSelectHeight(
        contents,
        rowCount,
        noSplitHeight,
        210 - 2 * 12.8
      );
      this.updateQuestionGroupItem({
        uuid,
        key: "height",
        value: height
      });
      this.updateQuestionGroupItem({
        uuid,
        key: "totalHeight",
        value: height
      });
      this.updateQuestionGroupItem({
        uuid,
        key: "title",
        value: this.getSelectTitle(contents)
      });
      this.dialogVisible = false;
    },
    getSelectTitle(contents) {
      if (contents.length === 1) {
        return this.quesTitle;
      }
      return contents
        .map(
          item =>
            `第${item.startId}-${item.endId}题为${
              QUESTION_TYPE_OPTIONS.filter(
                item2 => item2.value === item.quesType
              )[0].label
            }`
        )
        .join("，");
    }
  }
};
</script>
